import Vue from 'vue'
import Vuex from 'vuex'
// 导入分模块
import threeStore from './module/three';
import vuexPersisted from 'vuex-persistedstate'
import axios from 'axios'
Vue.use(Vuex);

// vuex 是vue的状态管理器 设计一些公共数据 可以在所有组件共享
// vuex 数据 是响应式的 一个组件更新 其他组件立即改变 
// vuex有 5个属性 
//   state  设计的公共状态 
//   mutations 同步修改state的方法   
//   actions 异步修改state的数据的方法 
//   getters  对state 的数据进行计算  state 的计算属性 
//   modules  模块化设计 
// vuex 应用场景
//         1.设计一些状态 来控制一些公共的ui组件的显示隐藏等 
//         2.使用vuex 来完成 任意组件传值 
//         3.使用vuex 经常存储  用户信息  token 购物车信息  路由表信息 
//         4. 一些公共请求可以放到vuex中 请求一次 后续组件可以直接使用 不需要再次请求

// vuex 缺点 是刷新页面 数据会丢失 重新初始化
// 可以使用插件 vuex-persistedstate  来解决刷新页面数据丢失的问题
// 手动结合localStorage 来实现
// npm i vuex-persistedstate --save 
// vuex-persistedstate 插件原理是自动结合localStorage 来实现数据的持久化存储



export default new Vuex.Store({
  state:{
    count:0,
    token:"abcdefg",
    navFlag:true,//控制侧边菜单的显示隐藏
    img:"" ,//多个组件使用到的接口数据
  },
  mutations:{
      // mutations 参数1 state 参数2 设计形参
    changeCount(state,num){ //修改count 
        state.count+=num;
    },
    changeToken(state,token){ //改变token的方法
      state.token=token;
    },
    changeNav(state,flag){
      state.navFlag=flag;
    },
    changeImg(state,img){
      state.img=img;
    }
  },
  actions:{ //异步修改 
      actCount({commit},num){
          // 触发muataions的方法 去修改state
        //  commit('mutations的名字')
          commit("changeCount",num)
      },
      actToken({commit},token){ //改变token 的actions 
        commit("changeToken",token)
      },
      actNav({commit},flag){
        commit("changeNav",flag)
      },
       actImg({commit}){ //获取表情包接口
         axios.get("https://yesno.wtf/api").then(res=>{
          console.log(res.data.image,"-----------")
          commit('changeImg',res.data.image)
        })
      }
      //   actCount(context,num){
      //     // 触发muataions的方法 去修改state
      //     // context.commit(mutations的名字)
      //     context.commit("changeCount",num)
      // }
  },
  getters:{ //计算属性 
      //形参1  state 
      countGetter:(state)=>{
          return state.count*2
      },
      tokens:state=>state.token
  },
  modules:{ //模块化设计
    threeStore//分模块名
  },
  plugins:[
    vuexPersisted({
      key:"jsxy", //存储到 localStorage 的key
      storage:window.sessionStorage //改变存储方式
    })
  ] //插件
})
